<template>
  <div id="ServiceDetail">
    <div class="banner container-fuild text-center">创新中心</div>
    <div class="container">
      <div class="row">
        <!-- <div class="col-xs-12 col-sm-12 col-md-3" id="myScrollspy">
          <ul class="nav nav-tabs nav-stacked center-block" id="myNav">
            <p>华南理工大学产研结合</p>
            <li
              :class="item.id == id ? 'active' : ''"
              v-for="(item, index) in serviceNavList"
              :key="index"
            >
              <a href="javascript:;" @click.stop="toSection(item.id)">{{
                item.title
              }}</a>
            </li>
          </ul>
        </div> -->
        <div class="col-xs-12 col-sm-12 col-md-9 content wow zoomIn">
          <div class="content-block" v-for="(item, index) in serviceContentList" :key="index">
            <h2 :id="item.id">
              {{ item.title }}
              <small>/ {{ item.eng_title }}</small>
            </h2>
            <div v-html="item.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="serviceDetail">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import WOW from 'wow.js'
const id = ref('section-1')
const serviceNavList = [
  {
    id: 'section-1',
    title: '技术创新与研发'
  },
  {
    id: 'section-2',
    title: '临床应用的成功案例'
  },
  {
    id: 'section-3',
    title: '远程手术的突破'
  },
  {
    id: 'section-4',
    title: '提高医疗服务可及性'
  }
]
const serviceContentList = [
  {
    id: 'section-1',
    title: '技术创新与研发',
    eng_title: 'Technological Innovation and Research',
    content:
      '<p>华南理工大学智能医疗与辅助装置研究中心通过机器人、人工智能、数字孪生等技术的深度融合，致力于智能诊断、治疗、辅助和康复技术的研发。这为远程超声机器人的开发提供了坚实的技术基础和创新动力。</p>'
  },
  {
    id: 'section-2',
    title: '临床应用的成功案例',
    eng_title: 'Successful cases of clinical application',
    content:
      '<p>华南理工大学与合作团队开发的全自动机器人超声系统（FARUS）能够在无人类辅助的情况下独立扫描甲状腺区域、识别恶性结节，并为诊断治疗提供特征数据，有效提升医疗效率。这一成果已在《Nature Communications》上发表，显示了其临床应用的创新性和有效性。</p>'
  },
  {
    id: 'section-3',
    title: '远程手术的突破',
    eng_title: 'Remote diagnosis and treatment',
    content:
      '<p>在全球范围内，远程超声机器人的应用也在不断取得突破。例如，北京大学第一医院泌尿外科完成了跨海超远程机器人手术，实现了超过1500公里的实时无延迟通信，这是国产手术机器人研发应用的重要里程碑。</p>'
  },
  {
    id: 'section-4',
    title: '提高医疗服务可及性',
    eng_title: 'Improve accessibility of medical services',
    content:
      '<p>远程超声机器人的应用突破了空间限制，使得优质医疗资源能够覆盖到偏远地区，解决了医疗资源分布不均的问题。如阜外医院团队完成的超声引导的机器人远程心脏手术，跨越2000多公里，展示了我国心脏手术和远程手术的尖端技术。</p>'
  }
]
function toSection(_id) {
  id.value = _id
  let top = document.getElementById(id.value).offsetTop
  $(window).scrollTop(top + 300)
  $('#myNav').affix({
    offset: {
      top: 300
    }
  })
}
const route = useRoute()
const props = defineProps({
  id: {
    type: String,
    required: true
    // default: 'section-1222'
  }
})


onMounted(() => {
  console.log('route：', route, route.params, route.query)
  console.log('history.state：', history.state)
  id.value = history.state.id
  console.log(id.value, 'pp')
  let top = document.getElementById(id.value).offsetTop
  $(window).scrollTop(top + 300)
  $('#myNav').affix({
    offset: {
      top: 300
    }
  })
  var wow = new WOW()
  wow.init()
})
</script>

<style scoped>
.banner {
  color: #fff;
  font-size: 30px;
  height: 150px;
  line-height: 150px;
  background-image: url('../assets/img/banner_2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-position: center center;
}

ul.nav-tabs {
  width: 200px;
  margin-top: 40px;
  border-radius: 4px;
  background: #fff;
  z-index: 99999;
  border: 1px solid #474747;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}

ul.nav-tabs li {
  text-align: center;
  margin: 0;
  border-top: 1px solid #474747;
}

ul.nav-tabs p {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  background: #474747;
  margin: 0;
  padding: 10px 0;
}

ul.nav-tabs li:first-child {
  border-top: none;
}

ul.nav-tabs li a {
  margin: 0;
  padding: 8px 16px;
  border-radius: 0;
}

ul.nav-tabs li.active a,
ul.nav-tabs li.active a:hover {
  color: #fff;
  background: #474747;
  border: 1px solid #474747;
}

ul.nav-tabs li:first-child a {
  border-radius: 4px 4px 0 0;
}

ul.nav-tabs li:last-child a {
  border-radius: 0 0 4px 4px;
}

ul.nav-tabs.affix {
  top: 30px;
}

.content-block {
  margin: 50px 0;
}

.content-block>h2 {
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
}
</style>
